<!-- 最新资讯 -->
<template>
	<div :style="{height:contentHeight+'px'}" class="scrollable-container">
		<div class="article _shadow" v-if="showFlag">
			<h1>{{ title }}</h1>
			<p class="article-pubDate">
				<span>发布时间：{{ pubDate }}</span>
				<span><strong>{{ articlePublisher }}</strong></span>
			</p>
			<div class="article-video" v-if="videoUrl">
				<video width="600" height="340" autoplay controls>
					<source :src="videoUrl" />
				</video>
			</div>
			<div  v-if="contentType==='richText'">
				<div class="article-main"  v-html="text"></div>
			</div>
			
			<template v-if="annexList.length">
				<h2>附件：</h2>
				<p v-for="(item, index) in annexList" :key="index">
					<a :href="item.url">{{ index + 1 }}、{{ item.name }}</a>
				</p>
			</template>
		</div>
		<div class="article _shadow" v-else>
		<el-empty  description="您要看的文章已下架！" />
		</div>
	</div>
</template>
<script lang="ts" setup name="latestNews">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { getFileSignParams } from '@/utils/signatureUtil';
import '@/theme/common/reset.scss';
//------------------接收传入参数(组件)-------------------

//------------------内部变量定义-------------------------
// 标题
const title = ref<string>('');
// 发布时间
const pubDate = ref<string>('');
// 发布人
const articlePublisher = ref<string>('');
// 视频资源
const videoUrl = ref<string>('');
// pdf资源
const pdfUrl = ref<string>('');
// 图片资源
const imgUrl = ref<string>('');
// 正文
const text = ref<string>('');
// 附件列表
const annexList = ref<any[]>([]);
const contentType= ref<string>('');
const showFlag = ref<boolean>(true);
const contentHeight=ref<number>(600);
// 路由对象
const route = useRoute();
//------------------定义调用方法-------------------------
/**
 * @description 查询资讯详情
 * @param articleId 文章id
 */
const getArticleDetail = (articleId: string) => {
	$api.common.send
		.post('article0002', {
			articleId: articleId,
		})
		.then((res: any) => {
			const result = res.result;
			if (result) {
				showFlag.value=true;
				title.value = result.title;
				document.title = title.value ;
				pubDate.value = result.publishTime;
				articlePublisher.value = result.publisher;
				contentType.value=result.contentType;
				if(result.contentType==='richText'){
					text.value = result.articleContent.replaceAll(/\?signature(\S*)?\"/g, getFileSignParams() + '"');
				}else{
					if(result.fileType==='video'){
						videoUrl.value=result.fileUrl
					}
					if(result.fileType==='image'){
						imgUrl.value=result.fileUrl
					}
					if(result.fileType==='pdf'){
						pdfUrl.value=result.fileUrl
					}
				}
				
				if(result.fileList){
					for (const item of result.fileList) {
						annexList.value.push({
							name: item.fileName,
							url: $api.common.fileDownloadUrl.url + item.fileShowId + getFileSignParams(),
						});
					}
				}
				
			}else{
				showFlag.value=true;
			}
		}).catch((error) => {
			console.log(error)
			showFlag.value=false;
		});
};
const initHeight = () => {
	const height = window.innerHeight- 0;
	contentHeight.value=height
};
//------------------生命周期与监听-----------------------
// 初始化
onMounted(() => {
	initHeight();
	route.query && route.query.articleId && getArticleDetail(String(route.query.articleId));
});

</script>
<style lang="scss" scoped>
.scrollable-container {
  overflow-y: auto; /* 启用垂直滚动条 */
  height: 80vh;
}
.article-main {
	color: #666;
	font-size: 16px;
	font-family: 'Microsoft Yahei', 'Simsun';
	line-height: 32px;
	outline: none;
	height: auto;
	p {
		margin: 0;
	}
}
.article {
	max-width: 1200px;
	padding: 50px;
	margin: 20px auto;
	background-color: #fff;

	h1 {
		color: #555;
		font-size: 24px;
		font-family: 'Microsoft YaHei';
		text-align: center;
		line-height: 1.5;
	}

	&-pubDate {
		padding: 10px 0;
		color: #666;
		font-size: 14px;
		border-bottom: 2px dotted #ddd;
		display:flex;
		justify-content: space-between;
		span {
			margin: 0 20px;
		}
	}

	&-video {
		display: flex;
		justify-content: center;
		margin: 20px 0;
	}

	

  h2 {
    line-height: 50px;
  }
}
</style>
